<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>太极图</title>
    <link rel="stylesheet" href="">
    <style type="text/css" media="screen">
    .box{
    	width: 240px;
		height:240px;
    	position: relative;
		margin: 50px auto;
    }
    .er {
        width: 240px;
        height: 240px;
        background-color: #eee;
        border-width: 2px 2px 120px 2px;
        border-style: solid;
        border-color: black;
        box-sizing: border-box;
        border-radius: 50%;
        position: relative;

        margin: 50px auto;
        animation: myAni 5s infinite linear;
    }

    .black {
        position: absolute;
        width: 118px;
        height: 118px;
        background-color: #eee;
        border: 50px solid black;
        border-radius: 50%;
        box-sizing: border-box;
        top: 60px;
    }

    .white {
        position: absolute;
        width: 118px;
        height: 118px;
        background-color: #000;
        border: 50px solid #eee;
        border-radius: 50%;
        box-sizing: border-box;
        top: 60px;
        right: 0;
    }

    #yin-yang {
        width: 96px;
        height: 48px;
        background: #eee;
        border-color: black;
        border-style: solid;
        border-width: 2px 2px 50px 2px;
        border-radius: 100%;
        position: absolute;
        top: 20px;
        left: 68px;
        z-index: 100;
        margin: 50px auto;
        animation: myAni2 5s infinite linear;
    }

    #yin-yang:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        background: #eee;
        border: 18px solid black;
        border-radius: 100%;
        width: 12px;
        height: 12px;
    }

    #yin-yang:after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        background: black;
        border: 18px solid #eee;
        border-radius: 100%;
        width: 12px;
        height: 12px;
    }
    @keyframes myAni {
        0% {
            transform: rotate(0deg)
        }
        50% {
            transform: rotate(180deg)
        }
        100% {
            transform: rotate(360deg)
        }
    }
     @keyframes myAni2 {
        0% {
            transform: rotate(0deg)
        }
        50% {
            transform: rotate(-180deg)
        }
        100% {
            transform: rotate(-360deg)
        }
    }
    </style>
</head>
	<div class="box">
		<div id="yin-yang"></div>
	    <div class="er">
	        <div class="black"></div>
	        <div class="white"></div>
	    </div>
	</div>
<body>
</body>

</html>